<template>
	<view>
		<up-popup :customStyle="customStyles" round="15" :show="show" mode="center">
			<view class="pad-30 up-popup-bg radius30">
				<view class="text-center font-36">{{title}}</view>
				<view class="text-center pad-30 content font-28">{{content}}</view>

				<view class="betweenX gap60 font-30">
					<view @click="hanldeCancel" class="flex-w cancel radius50 pad-top-bottom-25 text-center">
						{{cancelText}}
					</view>
					<view @click="hanldeConfirm"
						class="flex-w bg-theme color-white radius50 pad-top-bottom-25 button-style text-center">
						{{confirmText}}
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: '提示'
			},
			content: {
				type: String,
				default: '一段内容'
			},
			cancelText: {
				type: String,
				default: '取消'
			},
			confirmText: {
				type: String,
				default: '确认'
			}
		},
		data() {
			return {
				customStyles: {
					width: '650rpx',
					height: '300rpx'
				}
			}
		},
		methods: {
			// 改变状态
			hanldeCancel() {
				this.$emit('cancel')
			},
			hanldeConfirm() {
				this.$emit('confirm')
			}
		}
	}
</script>


<style scoped lang="scss">
	.content {
		height: 200rpx;
	}

	.up-popup-bg {
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
	}

	.cancel {
		// border: 2rpx solid $uni-color-primary;
		background: rgba(0,85,254,0.1);
	}
</style>